<template>
  <div class="shop-bag">
    <Navbar :back="true" title="My cart" />
    <div class="shop-bag__container">
      <ul>
        <CartItem v-for="(item, index) in filters" :key="item.id" v-model="filters[index]" />
      </ul>
      <div v-show="filters.length === 0" class="empty">
        <img src="@/assets/svg/empty.svg" alt="" />
        <div>购物车为空</div>
      </div>
    </div>
    <div v-show="filters.length !== 0" class="shop-bag__control">
      <van-submit-bar class="shop-bag__bar" button-color="rgba(255, 205, 65,0.8)"
        style="background-color: var(--background-color);color:var(--font-color)" :price="totalPrice" button-text="提交订单"
        @submit="pathTo">
        <span>共{{ totalCount }}件商品</span>
      </van-submit-bar>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from "@/components/Navbar.vue";
import CartItem from "./components/CartItem.vue";
import { useShopBagStore } from "@/store";
import { storeToRefs } from "pinia";
import { computed } from "vue";
import type { ShopBagType } from "@/views/home/index.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useShopBagStore();
const { list } = storeToRefs(store);
const filters = computed(() =>
  list.value.filter((item: ShopBagType) => item.count > 0 && item.token === localStorage.getItem("token"))
);
const totalPrice = computed(
  () => filters.value.reduce((acc, cur) => acc + cur.price * cur.count, 0) * 100
);
const totalCount = computed(() =>
  filters.value.reduce((acc, cur) => acc + cur.count, 0)
);
const pathTo = () => {
  router.push("/confirmOrder")
}

</script>

<style lang="scss">
.shop-bag {
  font-size: 16rem;

  .van-submit-bar__bar {
    border-top: 1rem solid var(--border-color);
  }

  &__container {
    height: calc(100vh - 77rem);
    background: var(--linear-gradient);
    box-sizing: border-box;
    padding: 0 20rem 30rem;
    overflow: scroll;


  }

  &__bar {
    .van-submit-bar__price {
      color: rgba($color-yellow, 0.8);
    }
  }

  &__control {
    z-index: 0;
  }

  .empty {
    height: 100rem;
    width: 100rem;
    color: var(--shadow-color);
    @include flex(column, center, center);
    @include absolutePOS(50%, 50%);
    transform: translate(-50%, -50%);

    img {
      height: 100%;
      width: 100%;
      margin-bottom: 10rem;
    }
  }
}
</style>
